<template>
  <div>
    <n-layout position="absolute" :native-scrollbar="false">
      <n-layout-header style="height: 12vh">
        <HomeHead> </HomeHead>
      </n-layout-header>
      <n-layout-content
        position="absolute"
        style="top: 12vh; max-height: 88vh"
        class="q-out"
      >
        <n-layout
          position="absolute"
          :native-scrollbar="false"
          class="q-content"
        >
          <div style="height: 84vh">
            <n-space vertical class="text">
              <n-text class="text-big"> 鲸语问卷</n-text>
              <n-text class="text-small">——不仅只有问卷 </n-text>
              <n-divider></n-divider>
              <n-text class="text-mid"> 听海的声音，也听听大家的声音 </n-text>
              <div class="text-btn">
                <n-space justify="space-between">
                  <n-button round size="large" type="primary" @click="start"
                    >马上开始</n-button
                  >
                  <n-button
                    round
                    size="large"
                    ghost
                    type="primary"
                    @click="know"
                  >
                    <template #icon>
                      <n-icon>
                        <LogoGithub></LogoGithub>
                      </n-icon> </template
                    >了解项目</n-button
                  >
                </n-space>
              </div>
            </n-space>
            <n-space class="ca">
              <n-carousel
                autoplay
                dot-placement="left"
                style="height: 69.5vh"
                show-arrow
              >
                <img class="carousel-img" src="@images/ca-0.jpg" />
                <img class="carousel-img" src="@images/ca-1.jpg" />
                <img class="carousel-img" src="@images/ca-2.jpg" />
              </n-carousel>
            </n-space>
          </div>
        </n-layout>
      </n-layout-content>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { LogoGithub } from '@vicons/ionicons5';
import HomeHead from './components/HomeHead.vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();

// 马上开始
const start = () => {
  if (store.state.auth) {
    router.push('/q/list');
  } else {
    router.push('/login');
  }
};
// 了解更多
const know = () => {
  //TODO
  window.open('https://gitee.com/Zeiion/whale-q');
};
</script>

<style scoped lang="scss">
.q-out {
  max-height: 80vh;
  max-width: 100vw;
  background: url('@images/login-bg2.jpg') no-repeat;
  background-position: 55% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
}
.q-content {
  background-color: rgba(255, 255, 255, 0.92);
  .text {
    position: relative;
    top: 20vh;
    left: 4vw;
    width: 40vw;
    &-big {
      font-size: 3.5rem;
      font-weight: 600;
    }
    &-mid {
      margin-left: 2vw;
      font-size: 2rem;
    }
    &-small {
      margin-left: 12vw;
      font-size: 1.5rem;
      font-weight: 500;
      color: #888;
    }
    &-btn {
      margin-top: 12vh;
      margin-left: 2vw;
      width: 28vw;
      button {
        width: 12vw;
      }
    }
  }

  .ca {
    position: relative;
    left: 41vw;
    top: -43vh;
    width: 67vw;
    height: 70vh;
  }
  .carousel-img {
    width: 56vw;
    height: 70vh;
    object-fit: cover;
  }
}
</style>
